<template>
	<div class="find_search" v-infinite-scroll="loadMore">
		<!-- 搜索框开始 -->
		<div class="top_relative">
			<div class="search">
				<div class="logo">
          <img src='~assets/images/find/logo.png' alt="">
        </div>
				<div class="center">
          <span></span>
					<input type="text" placeholder="搜索" v-model="keyword" v-on:blur="changeCount()">
				</div>
			</div>
			<!-- tab开始 -->
			<div class="tab">
				<div class="com" :class='tab_name=="com"?"cart":""' @click="tab('com')">{{tab_com_name}}
					<transition>
						<i class="iconfont icon-down" :class='tab_name=="com"?"rotate":""'></i>
					</transition>
				</div>
				<div class="classify" :class='tab_name=="classify"?"cart":""' @click="tab('classify')">{{tab_classify_name}}
					<i class="iconfont icon-down" :class='tab_name=="classify"?"rotate":""'></i>
				</div>
			</div>
      	<div v-show="group_id!='' && tab_name==''" class="group_show">在“
				<font>{{group_name}}</font>”分类下，找到{{group_total}}门课程</div>
			<!-- 属于综合面板 -->
			<div class="panel" v-show="tab_name=='com'" @touchmove.prevent>
				<ul class="panel_com">
					<li @click="com_select('综合排序')" :class='tab_com=="综合排序"?"active":""'>综合排序</li>
					<li @click="com_select('人气排序')" :class='tab_com=="人气排序"?"active":""'>人气排序</li>
					<li @click="com_select('时间排序')" :class='tab_com=="时间排序"?"active":""'>时间排序</li>          
				</ul>
			</div>
			<!-- 属于分类的面板 -->
			<div class="panel" id="panel" v-show="tab_name=='classify'">
				<div class="panel_classify">
					<div class="one">
						<ul>
							<li @click="one(-1,'a')" :class='one_id=="a"?"active":""'>全部</li>
							<li type="li" :class='one_id==item.id?"active":""' @click="one($index,item)" v-for="(item,$index) in classifydata">
								{{item.name}}
							</li>
						</ul>
					</div>
					<div class="two">
						<ul v-if="this.index===-1">
							<li @click="two(-1,'b')" :class='two_id=="b"?"active":""'>全部</li>
						</ul>
						<ul v-if="this.index>=0">
							<li @click="two(-1,'b')" :class='two_id=="b"?"active":""'>全部</li>
               <!-- 为空的样式开始 -->
                  	<div class="list_empty" style="height:100%;background:#ffffff;" v-show="classifydata[index].son_group.length==0">
                      <img src="~assets/images/find/empty.png" alt="" style="margin:0;">
                      <div class="tit">该分类下没有子分类</div>
                      <div class="c" style="text-align:center;font-size:0.12rem;color:#c62c2e;" @click="two(-1,'b')">直接查看</div>
                    </div>
                  <!-- 为空的样式结束 -->
							<li type="li" :class='two_id==item.id?"active":""' v-for="(item,$index) in classifydata[index].son_group"  @click="two($index,item)">
								{{item.name}}
							</li>
						</ul>
					</div>
					<div class="three">
						<!-- <ul v-if="this.threeclassify.length==0"> -->
							<ul>
							<li @click="three(-1,'c')" :class='three_id=="c"?"active":""'>全部</li>
                <!-- 为空的样式开始 -->
                  	<div class="list_empty" style="background:#ffffff;" v-show="threeclassify.length==0">
                      <img src="~assets/images/find/empty.png" alt="" style="margin:0;">
                      <div class="tit">该分类下没有子分类</div>
                      <div class="c" style="text-align:center;font-size:0.12rem;color:#c62c2e;" @click="three(-1,'c')">直接查看</div>
                    </div>
                  <!-- 为空的样式结束 -->
							<li type="li" :class='three_id==item.id?"active":""' @click="three($index,item)" v-for="(item,$index) in threeclassify">
								{{item.name}}
							</li>
						</ul>
					</div>
				</div>
			</div>
		</div>
		<!-- 分类内容列表 -->
		<!-- 内容为空的样式 -->
		<div class="list_empty" v-if="list_empty">
			<img src="~assets/images/find/empty.png" alt="">
			<div class="tit">这里什么都没有哦~</div>
		</div>
		<transition>
			<div class="content" :style='style'>
				<div class="list clear" v-for="item in datateam" @click="detailPage(item)">
					<img class="img" v-bind:src='item.image|renderImg' />
					<div class="text">
						<p class="name">{{item.name}}</p>
						<p class="type_time clear">
							<span class="type">视频慕课 | 7日内完成</span>
						</p>
						<p class="count_price">
							<span class="count"><i class="iconfont icon-class"></i>中级干部培训班</span>
						</p>
					</div>
				</div>
			</div>
		</transition>
		<div class="cover" v-show="tab_name" @click="cover()" @touchmove.prevent></div>
	</div>
</template>
<script>
import Vue from "vue";
import { InfiniteScroll } from "mint-ui";
Vue.use(InfiniteScroll);
export default {
  name: "find_search",
  data() {
    return {
      // 模糊查找
      keyword: "",
      tab_name: "",
      tab_com_name: "综合",
      tab_classify_name: "分类",
      // 综合
      tab_com: "综合排序",
      sort_way: "",
      sort_field: "",
      tab_classify: "全部分类",
     
      tab_price: [],
      active: "0",
      str: "0",
      // 分类数据
      // classifydata: "",
      classifydata:[{"son_group": [{"son_group": [], "user_count": 30, "description": "", "add_time_int": 1506678334, "image": "", "group_index": 0, "state": 1, "parent_id": "ej4r20355084", "team_id": "26235843f9373aa65e6144a8b308d234cecc8463", "add_time_str": "2017-09-29 17:45:34", "id": "ej4r23432486", "group_type": "55", "name": "右手一只"}, {"son_group": [], "user_count": 1, "description": "", "add_time_int": 1509002389, "image": "", "group_index": 0, "state": 1, "parent_id": "ej4r20355084", "team_id": "26235843f9373aa65e6144a8b308d234cecc8463", "add_time_str": "2017-10-26 15:19:49", "id": "ek1pl8993130", "group_type": "55", "name": "这是六个字体"}, {"son_group": [], "user_count": 4, "description": "", "add_time_int": 1507792462, "image": "", "group_index": 0, "state": 1, "parent_id": "ej4r20355084", "team_id": "26235843f9373aa65e6144a8b308d234cecc8463", "add_time_str": "2017-10-12 15:14:22", "id": "ekmpi6279032", "group_type": "55", "name": "产品构思"}, {"son_group": [], "user_count": 4, "description": "", "add_time_int": 1507792495, "image": "", "group_index": 0, "state": 1, "parent_id": "ej4r20355084", "team_id": "26235843f9373aa65e6144a8b308d234cecc8463", "add_time_str": "2017-10-12 15:14:55", "id": "ekmpi9518957", "group_type": "55", "name": "游戏策划"}, {"son_group": [], "user_count": 0, "description": "", "add_time_int": 1508409388, "image": "", "group_index": 0, "state": 1, "parent_id": "ej4r20355084", "team_id": "26235843f9373aa65e6144a8b308d234cecc8463", "add_time_str": "2017-10-19 18:36:28", "id": "ektsv8833746", "group_type": "55", "name": "游戏项目"}, {"son_group": [], "user_count": 0, "description": "", "add_time_int": 1508409402, "image": "", "group_index": 0, "state": 1, "parent_id": "ej4r20355084", "team_id": "26235843f9373aa65e6144a8b308d234cecc8463", "add_time_str": "2017-10-19 18:36:42", "id": "ektsw0243229", "group_type": "55", "name": "产品策划"}, {"son_group": [], "user_count": 0, "description": "", "add_time_int": 1508487041, "image": "", "group_index": 0, "state": 1, "parent_id": "ej4r20355084", "team_id": "26235843f9373aa65e6144a8b308d234cecc8463", "add_time_str": "2017-10-20 16:10:41", "id": "ekuqg4195112", "group_type": "55", "name": "视频直播"}, {"son_group": [], "user_count": 0, "description": "", "add_time_int": 1508487051, "image": "", "group_index": 0, "state": 1, "parent_id": "ej4r20355084", "team_id": "26235843f9373aa65e6144a8b308d234cecc8463", "add_time_str": "2017-10-20 16:10:51", "id": "ekuqg5112757", "group_type": "55", "name": "语音直播"}, {"son_group": [], "user_count": 0, "description": "", "add_time_int": 1508487062, "image": "", "group_index": 0, "state": 1, "parent_id": "ej4r20355084", "team_id": "26235843f9373aa65e6144a8b308d234cecc8463", "add_time_str": "2017-10-20 16:11:02", "id": "ekuqg6228790", "group_type": "55", "name": "直播课程"}, {"son_group": [], "user_count": 1, "description": "", "add_time_int": 1508487081, "image": "", "group_index": 0, "state": 1, "parent_id": "ej4r20355084", "team_id": "26235843f9373aa65e6144a8b308d234cecc8463", "add_time_str": "2017-10-20 16:11:21", "id": "ekuqg8174638", "group_type": "55", "name": "野外生存"}, {"son_group": [], "user_count": 0, "description": "", "add_time_int": 1508487090, "image": "", "group_index": 0, "state": 1, "parent_id": "ej4r20355084", "team_id": "26235843f9373aa65e6144a8b308d234cecc8463", "add_time_str": "2017-10-20 16:11:30", "id": "ekuqg9012978", "group_type": "55", "name": "直播精选"}], "user_count": 50, "description": "", "add_time_int": 1506678303, "image": "", "group_index": 0, "state": 1, "parent_id": "", "team_id": "26235843f9373aa65e6144a8b308d234cecc8463", "add_time_str": "2017-09-29 17:45:03", "id": "ej4r20355084", "group_type": "55", "name": "回家吃饭"}, {"son_group": [], "user_count": 109, "description": "", "add_time_int": 1505718062, "image": "", "group_index": 0, "state": 1, "parent_id": "", "team_id": "26235843f9373aa65e6144a8b308d234cecc8463", "add_time_str": "2017-09-18 15:01:02", "id": "ejspa6212877", "group_type": "55", "name": "我爱我家"}, {"son_group": [], "user_count": 45, "description": "", "add_time_int": 1505895977, "image": "", "group_index": 0, "state": 1, "parent_id": "", "team_id": "26235843f9373aa65e6144a8b308d234cecc8463", "add_time_str": "2017-09-20 16:26:17", "id": "ejuqp7738256", "group_type": "55", "name": "为国捐躯"}, {"son_group": [{"son_group": [], "user_count": 5, "description": "", "add_time_int": 1506413407, "image": "", "group_index": 0, "state": 1, "parent_id": "ejzsi1392348", "team_id": "26235843f9373aa65e6144a8b308d234cecc8463", "add_time_str": "2017-09-26 16:10:07", "id": "ej1qg0727838", "group_type": "55", "name": "这是二级分组"}], "user_count": 1, "description": "", "add_time_int": 1506334413, "image": "", "group_index": 0, "state": 1, "parent_id": "", "team_id": "26235843f9373aa65e6144a8b308d234cecc8463", "add_time_str": "2017-09-25 18:13:33", "id": "ejzsi1392348", "group_type": "55", "name": "我爱中国"}, {"son_group": [], "user_count": 0, "description": "", "add_time_int": 1509002328, "image": "", "group_index": 0, "state": 1, "parent_id": "", "team_id": "26235843f9373aa65e6144a8b308d234cecc8463", "add_time_str": "2017-10-26 15:18:48", "id": "ek1pl2837424", "group_type": "55", "name": "这是六个字体"}, {"son_group": [{"son_group": [], "user_count": 0, "description": "", "add_time_int": 1508316585, "image": "", "group_index": 0, "state": 1, "parent_id": "ekklw0812022", "team_id": "26235843f9373aa65e6144a8b308d234cecc8463", "add_time_str": "2017-10-18 16:49:45", "id": "eksq48575572", "group_type": "55", "name": "12"}], "user_count": 0, "description": "", "add_time_int": 1507606608, "image": "", "group_index": 0, "state": 1, "parent_id": "", "team_id": "26235843f9373aa65e6144a8b308d234cecc8463", "add_time_str": "2017-10-10 11:36:48", "id": "ekklw0812022", "group_type": "55", "name": "中国爱我"}, {"son_group": [{"son_group": [], "user_count": 0, "description": "", "add_time_int": 1508320770, "image": "", "group_index": 0, "state": 1, "parent_id": "eksr06161429", "team_id": "26235843f9373aa65e6144a8b308d234cecc8463", "add_time_str": "2017-10-18 17:59:30", "id": "eksr07018634", "group_type": "55", "name": "新建25"}], "user_count": 0, "description": "", "add_time_int": 1508320761, "image": "", "group_index": 0, "state": 1, "parent_id": "", "team_id": "26235843f9373aa65e6144a8b308d234cecc8463", "add_time_str": "2017-10-18 17:59:21", "id": "eksr06161429", "group_type": "55", "name": "441"}, {"son_group": [{"son_group": [], "user_count": 0, "description": "", "add_time_int": 1508324291, "image": "", "group_index": 0, "state": 1, "parent_id": "ekss98162482", "team_id": "26235843f9373aa65e6144a8b308d234cecc8463", "add_time_str": "2017-10-18 18:58:11", "id": "ekss99152784", "group_type": "55", "name": "ad12"}], "user_count": 0, "description": "", "add_time_int": 1508324281, "image": "", "group_index": 0, "state": 1, "parent_id": "", "team_id": "26235843f9373aa65e6144a8b308d234cecc8463", "add_time_str": "2017-10-18 18:58:01", "id": "ekss98162482", "group_type": "55", "name": "新ad"}, {"son_group": [], "user_count": 0, "description": "", "add_time_int": 1508903748, "image": "", "group_index": 0, "state": 1, "parent_id": "", "team_id": "26235843f9373aa65e6144a8b308d234cecc8463", "add_time_str": "2017-10-25 11:55:48", "id": "ekzl84866073", "group_type": "55", "name": "私有课程"}, {"son_group": [], "user_count": 0, "description": "", "add_time_int": 1509493448, "image": "", "group_index": 0, "state": 1, "parent_id": "", "team_id": "26235843f9373aa65e6144a8b308d234cecc8463", "add_time_str": "2017-11-01 07:44:08", "id": "elbh14881061", "group_type": "55", "name": "23423"}, {"son_group": [], "user_count": 0, "description": "", "add_time_int": 1509493459, "image": "", "group_index": 0, "state": 1, "parent_id": "", "team_id": "26235843f9373aa65e6144a8b308d234cecc8463", "add_time_str": "2017-11-01 07:44:19", "id": "elbh15972531", "group_type": "55", "name": "55555"}],
      style: "",
      onoff: true,
      // 一级分类的索引
      index: -1,
      // 一级分类的点击id
      one_id: "a",
      // 二级分类的点击id
      two_id: "b",
      three_id: "c",
      // 二级分类滚动的样式
      group_name: "",
      product_type: this.$route.query.product_type
        ? JSON.stringify([this.$route.query.product_type])
        : JSON.stringify([0, 31, 52, 53, 56]),
      // datateam: [],
      datateam:[{"original_price": 0, "teach_object": "", "public_type": 0, "weight": 0.0, "tag_info": "", "lecture_name": "", "image": "59c21c5df6932334172aadc6", "site_id": "2432383526fd39e5ddf84a2588292ad5ac494e25", "tar_group_id": "", "team_id": "26235843f9373aa65e6144a8b308d234cecc8463", "courseware_id": "", "bind_user_id": "", "tar_group_name": "", "id": "12506899511a309123f145309848e6bc8ecb2ef5", "has_preferential": 0, "valid_data": 0, "preferential_price": 0, "image_json": "", "user_count": 1, "temp_freight": "", "preferential_info": "", "introl": "", "add_time_int": 1509512506, "subject_id": "", "course_type": 0, "detail": "", "top_value": 0, "state": 1, "video_id": "", "location": "", "add_time_str": "2017-11-01 13:01:46", "flower_count": 0, "advise": "", "preview": "", "start_time": 0, "sale_count": 0, "buy_pattern": 0, "description": "", "top_time": 0, "teacher_intro": "", "video_offset": 0, "price": 10, "income": 10, "preferential_end_time": 0, "live_state": 0, "relation_type": 0, "invitation_card": 1, "preferential_start_time": 0, "subject_name": "", "group_id2": "", "usage_type": 0, "group_name": "", "info": "", "commission_rate": null, "class_type": -1, "product_type": 0, "name": "nl2739", "target_client": "", "course_forms": 0, "freight": 0, "program_type": -1, "org_id": "", "class_hour": 0, "credit": 0.0, "creator_id": "", "index": 0, "end_time": 0, "lecture_image": "", "invitation_divide": 60, "group_id": "", "lecture_id": ""}, {"original_price": 0, "teach_object": "", "public_type": 0, "weight": 0.0, "tag_info": "", "lecture_name": "", "image": "59c21be2f6932334172aadc4", "site_id": "2432383526fd39e5ddf84a2588292ad5ac494e25", "tar_group_id": "", "team_id": "26235843f9373aa65e6144a8b308d234cecc8463", "courseware_id": "", "bind_user_id": "", "tar_group_name": "", "id": "0744753267a779d902764cf8b96facb67d95d424", "has_preferential": 0, "valid_data": 0, "preferential_price": 0, "image_json": "", "user_count": 1, "temp_freight": "", "preferential_info": "", "introl": "", "add_time_int": 1509507447, "subject_id": "", "course_type": 0, "detail": "", "top_value": 0, "state": 1, "video_id": "", "location": "", "add_time_str": "2017-11-01 11:37:27", "flower_count": 0, "advise": "", "preview": "", "start_time": 0, "sale_count": 0, "buy_pattern": 0, "description": "", "top_time": 0, "teacher_intro": "", "video_offset": 0, "price": 10, "income": 10, "preferential_end_time": 0, "live_state": 0, "relation_type": 0, "invitation_card": 1, "preferential_start_time": 0, "subject_name": "", "group_id2": "", "usage_type": 0, "group_name": "", "info": "", "commission_rate": null, "class_type": -1, "product_type": 0, "name": "ly5049", "target_client": "", "course_forms": 0, "freight": 0, "program_type": -1, "org_id": "", "class_hour": 0, "credit": 0.0, "creator_id": "", "index": 0, "end_time": 0, "lecture_image": "", "invitation_divide": 20, "group_id": "", "lecture_id": ""}, {"original_price": 0, "teach_object": "", "public_type": 0, "weight": 0.0, "tag_info": "", "lecture_name": "", "image": "59c21c5df6932334172aadc6", "site_id": "2432383526fd39e5ddf84a2588292ad5ac494e25", "tar_group_id": "", "team_id": "26235843f9373aa65e6144a8b308d234cecc8463", "courseware_id": "", "bind_user_id": "", "tar_group_name": "", "id": "072062056fbf719528aa4750bd9a62aa855f04da", "has_preferential": 0, "valid_data": 0, "preferential_price": 0, "image_json": "", "user_count": 1, "temp_freight": "", "preferential_info": "", "introl": "", "add_time_int": 1509507206, "subject_id": "", "course_type": 0, "detail": "", "top_value": 0, "state": 1, "video_id": "", "location": "", "add_time_str": "2017-11-01 11:33:26", "flower_count": 0, "advise": "", "preview": "", "start_time": 0, "sale_count": 0, "buy_pattern": 0, "description": "", "top_time": 0, "teacher_intro": "", "video_offset": 0, "price": 10, "income": 10, "preferential_end_time": 0, "live_state": 0, "relation_type": 0, "invitation_card": 1, "preferential_start_time": 0, "subject_name": "", "group_id2": "", "usage_type": 0, "group_name": "", "info": "", "commission_rate": null, "class_type": -1, "product_type": 0, "name": "my7342", "target_client": "", "course_forms": 0, "freight": 0, "program_type": -1, "org_id": "", "class_hour": 0, "credit": 0.0, "creator_id": "", "index": 0, "end_time": 0, "lecture_image": "", "invitation_divide": 60, "group_id": "", "lecture_id": ""}, {"original_price": 0, "teach_object": "", "public_type": 0, "weight": 0.0, "tag_info": "", "lecture_name": "", "image": "59c21be2f6932334172aadc4", "site_id": "2432383526fd39e5ddf84a2588292ad5ac494e25", "tar_group_id": "", "team_id": "26235843f9373aa65e6144a8b308d234cecc8463", "courseware_id": "", "bind_user_id": "", "tar_group_name": "", "id": "063632403c11769fbe1a4603b7be9408d6e57f23", "has_preferential": 0, "valid_data": 0, "preferential_price": 0, "image_json": "", "user_count": 1, "temp_freight": "", "preferential_info": "", "introl": "", "add_time_int": 1509506363, "subject_id": "", "course_type": 0, "detail": "", "top_value": 0, "state": 1, "video_id": "", "location": "", "add_time_str": "2017-11-01 11:19:23", "flower_count": 0, "advise": "", "preview": "", "start_time": 0, "sale_count": 0, "buy_pattern": 0, "description": "", "top_time": 0, "teacher_intro": "", "video_offset": 0, "price": 10, "income": 10, "preferential_end_time": 0, "live_state": 0, "relation_type": 0, "invitation_card": 1, "preferential_start_time": 0, "subject_name": "", "group_id2": "", "usage_type": 0, "group_name": "", "info": "", "commission_rate": null, "class_type": -1, "product_type": 0, "name": "ks8016", "target_client": "", "course_forms": 0, "freight": 0, "program_type": -1, "org_id": "", "class_hour": 0, "credit": 0.0, "creator_id": "", "index": 0, "end_time": 0, "lecture_image": "", "invitation_divide": 50, "group_id": "", "lecture_id": ""}, {"original_price": 0, "teach_object": "", "public_type": 0, "weight": 0.0, "tag_info": "", "lecture_name": "", "image": "59c21c5df693233416a00194", "site_id": "", "tar_group_id": "", "team_id": "26235843f9373aa65e6144a8b308d234cecc8463", "courseware_id": "", "bind_user_id": "", "tar_group_name": "", "id": "365551010e5a88679df34aeabc9583f9409db152", "has_preferential": 0, "valid_data": 0, "preferential_price": 0, "image_json": "", "user_count": 2, "temp_freight": "", "preferential_info": "", "introl": "", "add_time_int": 1509436555, "subject_id": "", "course_type": 0, "detail": "", "top_value": 0, "state": 1, "video_id": "", "location": "", "add_time_str": "2017-10-31 15:55:55", "flower_count": 0, "advise": "", "preview": "", "start_time": 1509436538, "sale_count": 0, "buy_pattern": 0, "description": "", "top_time": 0, "teacher_intro": "", "video_offset": 0, "price": 0, "income": 0, "preferential_end_time": 0, "live_state": 0, "relation_type": 0, "invitation_card": 0, "preferential_start_time": 0, "subject_name": "", "group_id2": "", "usage_type": 0, "group_name": "", "info": "", "commission_rate": null, "class_type": 0, "product_type": 56, "name": "音乐", "target_client": "", "course_forms": 0, "freight": 0, "program_type": 0, "org_id": "", "class_hour": 0, "credit": 0.0, "creator_id": "", "index": 0, "end_time": 0, "lecture_image": "", "invitation_divide": 0, "group_id": "", "lecture_id": ""}, {"original_price": 0, "teach_object": "", "public_type": 0, "weight": 0.0, "tag_info": "", "lecture_name": "", "image": "59c21c5df693233416a00194", "site_id": "", "tar_group_id": "", "team_id": "26235843f9373aa65e6144a8b308d234cecc8463", "courseware_id": "3009396962ebc18d294e46f2901a67ab3c17395f", "bind_user_id": "", "tar_group_name": "", "id": "35164955eb635fa66c964e02a738d5af4bc31a17", "has_preferential": 0, "valid_data": 0, "preferential_price": 0, "image_json": "", "user_count": 3, "temp_freight": "", "preferential_info": "", "introl": "", "add_time_int": 1509435164, "subject_id": "", "course_type": 0, "detail": "", "top_value": 0, "state": 1, "video_id": "", "location": "", "add_time_str": "2017-10-31 15:32:44", "flower_count": 0, "advise": "", "preview": "", "start_time": 1509435162, "sale_count": 0, "buy_pattern": 0, "description": "", "top_time": 0, "teacher_intro": "", "video_offset": 0, "price": 0, "income": 0, "preferential_end_time": 0, "live_state": 0, "relation_type": 0, "invitation_card": 0, "preferential_start_time": 0, "subject_name": "", "group_id2": "", "usage_type": 0, "group_name": "", "info": "", "commission_rate": null, "class_type": 0, "product_type": 56, "name": "新的直播", "target_client": "", "course_forms": 0, "freight": 0, "program_type": 0, "org_id": "", "class_hour": 0, "credit": 0.0, "creator_id": "", "index": 0, "end_time": 0, "lecture_image": "", "invitation_divide": 0, "group_id": "", "lecture_id": ""}, {"original_price": 0, "teach_object": "", "public_type": 0, "weight": 0.0, "tag_info": "", "lecture_name": "", "image": "59c21c5bf693233414948b7b", "site_id": "0", "tar_group_id": "", "team_id": "26235843f9373aa65e6144a8b308d234cecc8463", "courseware_id": "", "bind_user_id": "", "tar_group_name": "", "id": "2218201161fde1abb2384cfa85a19300720aecef", "has_preferential": 0, "valid_data": 0, "preferential_price": 0, "image_json": "", "user_count": 0, "temp_freight": "", "preferential_info": "", "introl": "", "add_time_int": 1509422182, "subject_id": "", "course_type": -1, "detail": "", "top_value": 0, "state": 1, "video_id": "", "location": "", "add_time_str": "2017-10-31 11:56:22", "flower_count": 0, "advise": "", "preview": "", "start_time": 1509422177, "sale_count": 0, "buy_pattern": 0, "description": "", "top_time": 0, "teacher_intro": "", "video_offset": 0, "price": 0, "income": 0, "preferential_end_time": 0, "live_state": 1, "relation_type": 0, "invitation_card": 0, "preferential_start_time": 0, "subject_name": "", "group_id2": "", "usage_type": 0, "group_name": "", "info": "", "commission_rate": null, "class_type": -1, "product_type": 31, "name": "mo2138", "target_client": "", "course_forms": 0, "freight": 0, "program_type": -1, "org_id": "", "class_hour": 0, "credit": 0.0, "creator_id": "27383431cad2d17f13fa4e1e94b632adb63b2ac4", "index": 0, "end_time": 1510372579, "lecture_image": "", "invitation_divide": 0, "group_id": "", "lecture_id": ""}, {"original_price": 0, "teach_object": "", "public_type": 0, "weight": 0.0, "tag_info": "", "lecture_name": "", "image": "59c21c5df693233416a00194", "site_id": "", "tar_group_id": "", "team_id": "26235843f9373aa65e6144a8b308d234cecc8463", "courseware_id": "57ac4b16f693234e2ed9a067", "bind_user_id": "", "tar_group_name": "", "id": "516268992cbc77711c2a4b06bb5900fd1e9d488c", "has_preferential": 0, "valid_data": 0, "preferential_price": 0, "image_json": "", "user_count": 2, "temp_freight": "", "preferential_info": "", "introl": "", "add_time_int": 1509351626, "subject_id": "", "course_type": 0, "detail": "", "top_value": 0, "state": 1, "video_id": "", "location": "", "add_time_str": "2017-10-30 16:20:26", "flower_count": 0, "advise": "", "preview": "", "start_time": 1509351623, "sale_count": 0, "buy_pattern": 0, "description": "", "top_time": 0, "teacher_intro": "", "video_offset": 0, "price": 0, "income": 0, "preferential_end_time": 0, "live_state": 2, "relation_type": 0, "invitation_card": 0, "preferential_start_time": 0, "subject_name": "", "group_id2": "", "usage_type": 0, "group_name": "", "info": "", "commission_rate": null, "class_type": 0, "product_type": 56, "name": "都收拾", "target_client": "", "course_forms": 0, "freight": 0, "program_type": 0, "org_id": "", "class_hour": 0, "credit": 0.0, "creator_id": "", "index": 0, "end_time": 0, "lecture_image": "", "invitation_divide": 0, "group_id": "", "lecture_id": ""}, {"original_price": 0, "teach_object": "", "public_type": 0, "weight": 0.0, "tag_info": "", "lecture_name": "", "image": "https://de4og7052286.witcloud.net/e2fc6ef6bac111e78b4252540097101f.jpg", "site_id": "0", "tar_group_id": "ek1pl8993130", "team_id": "26235843f9373aa65e6144a8b308d234cecc8463", "courseware_id": "", "bind_user_id": "", "tar_group_name": "这是六个字体", "id": "4744859084fa753a010043729b993e18725503d0", "has_preferential": 0, "valid_data": 0, "preferential_price": 0, "image_json": "", "user_count": 2, "temp_freight": "", "preferential_info": "", "introl": "", "add_time_int": 1509347448, "subject_id": "", "course_type": -1, "detail": "", "top_value": 0, "state": 1, "video_id": "", "location": "", "add_time_str": "2017-10-30 15:10:48", "flower_count": 0, "advise": "", "preview": "", "start_time": 1509347442, "sale_count": 0, "buy_pattern": 0, "description": "", "top_time": 0, "teacher_intro": "", "video_offset": 0, "price": 0, "income": 0, "preferential_end_time": 0, "live_state": 0, "relation_type": 0, "invitation_card": 0, "preferential_start_time": 0, "subject_name": "", "group_id2": "", "usage_type": 0, "group_name": "这是六个字体", "info": "", "commission_rate": null, "class_type": -1, "product_type": 31, "name": "翻页", "target_client": "", "course_forms": 0, "freight": 0, "program_type": -1, "org_id": "", "class_hour": 0, "credit": 0.0, "creator_id": "99551640e8f6d5ff539e42ad8cd1091666094125", "index": 0, "end_time": 1509433844, "lecture_image": "", "invitation_divide": 0, "group_id": "ek1pl8993130", "lecture_id": ""}, {"original_price": 0, "teach_object": "", "public_type": 0, "weight": 0.0, "tag_info": "", "lecture_name": "", "image": "55974dfbb4b7067f746c5b26", "site_id": "", "tar_group_id": "", "team_id": "26235843f9373aa65e6144a8b308d234cecc8463", "courseware_id": "", "bind_user_id": "", "tar_group_name": "", "id": "45270325886a51160d9b43cb83853c43ff18e895", "has_preferential": 0, "valid_data": 0, "preferential_price": 0, "image_json": "", "user_count": 11, "temp_freight": "", "preferential_info": "", "introl": "", "add_time_int": 1509345270, "subject_id": "", "course_type": 0, "detail": "1", "top_value": 0, "state": 1, "video_id": "", "location": "", "add_time_str": "2017-10-30 14:34:30", "flower_count": 0, "advise": "", "preview": "", "start_time": 0, "sale_count": 0, "buy_pattern": 0, "description": "", "top_time": 0, "teacher_intro": "", "video_offset": 0, "price": 1, "income": 0, "preferential_end_time": 0, "live_state": 0, "relation_type": 0, "invitation_card": 0, "preferential_start_time": 0, "subject_name": "", "group_id2": "", "usage_type": 0, "group_name": "回家吃饭", "info": "<p>234</p>", "commission_rate": null, "class_type": 0, "product_type": 53, "name": "测试鞍山市", "target_client": "", "course_forms": 0, "freight": 0, "program_type": 0, "org_id": "", "class_hour": 0, "credit": 0.0, "creator_id": "", "index": 0, "end_time": 0, "lecture_image": "", "invitation_divide": 0, "group_id": "", "lecture_id": ""}],
      threeclassify: [1],
      group_total: "",
      group_id: "",
      page: 1,
      g_id: "",
      is_loading: false,
      no_data: false,
      allLoad: false,
      list_empty: false,
      name_one: "",
      id_one: "",
      name_two: "",
      id_two: ""
    };
  },
  mounted: function() {
    document
      .getElementById("panel")
      .addEventListener("touchmove", function(event) {
        if (event.target.type == "li") return;
        event.preventDefault();
      });
    this.$nextTick(function() {
      // this.getdata();
      // this.getdatateam();
    });
  },
  filters: {
    // 时间戳
    timeStamp: function(value) {
      // 如果是微课和慕课返回空
      if (value.product_type == 53 || value.product_type == 0) {
        return "";
      } else if (value.product_type == 52) {
        //如果是专辑，返回内容个数
        return "l " + 5 + "个内容";
      } else if (value.product_type == 31 || value.product_type == 56) {
        // 如果是直播(语音，视频)，返回时间
        var time = Date.parse(new Date()) / 1000;
        // 如果过期
        var hms;
        if (value.live_state == 2) {
          if (value.product_type == 56) {
            return "| 已结束";
          } else {
            var time_s = value.end_time - value.start_time;
            time_s = time_s;
            hms = "秒钟";
          }
          if (time_s > 60) {
            time_s = time_s / 60;
            hms = "分钟";
            if (time_s > 60) {
              time_s = time_s / 60;
              hms = "小时";
            }
          }
          return "l 时长" + parseInt(time_s) + hms;
        }
        // 如果正在直播
        if (value.live_state == 1) {
          return "l 正在直播";
        }
        // 如果还没有开始
        if (value.live_state == 0) {
          var time = Date.parse(new Date()) / 1000;
          var time_s = value.start_time - time;
          if (value.start_time == 0) {
            return "";
          }
          if (time > value.end_time) {
            return "l 已结束";
          }
          if (time < value.end_time && time > value.start_time) {
            return "l 正在直播";
          }
          hms = "秒钟";
          if (time_s > 60) {
            time_s = time_s / 60;
            hms = "分钟";
          }
          if (time_s > 60) {
            time_s = time_s / 60;
            hms = "小时";
            if (time_s > 24) {
              time_s = time_s / 24;
              hms = "天";
              if (time_s > 30) {
                time_s = time_s / 30;
                hms = "月";
                if (time_s > 12) {
                  time_s = time_s / 12;
                  hms = "年";
                }
              }
            }
          }
          return "l " + parseInt(time_s) + hms + "后开始";
        }
      } else {
        return "";
      }
    },
    // 人气
    usercount: function(value) {
      if (value.product_type == 52) {
        return value.user_count + "人订阅";
      } else {
        return value.user_count + "人气";
      }
    }
  },
  methods: {
    // 清空数据的函数
    clear_options: function() {
      this.page = 1;
      this.datateam = [];
      this.list_empty = false;
    },
    changeCount: function() {
      this.list_empty = false;
      this.page = 1;
      this.datateam = [];
      this.getdatateam();
    },
    // 点击tab开始
    tab: function(value) {
      if (this.tab_name == value) {
        // tab_name控制选中
        this.tab_name = "";
        this.clear_options();
        this.datateam = [];
        this.page = 1;
        this.list_empty = false;
        this.getdatateam();
      } else {
        this.style = {
          height: "100%",
          overflow: "hidden"
        };
        this.tab_name = value;
        if (value == "com") {
          this.tab_com_name = this.tab_com;
        }
        if (value == "classify") {
          if (this.onoff) {
            this.tab_classify_name = this.tab_classify;
            this.onoff = false;
            var params = this.$route.params.par;
            if (params) {
              this.tab_classify_name = params.three_item.name;
            }
          } else {
          }
        }
      }
    },
    com_select(num) {
      this.tab_com = num;
      this.tab_com_name = num;
      if (num == "综合排序") {
        this.sort_way = "";
        this.sort_field = "";
      }
      if (num == "人气排序") {
        this.sort_way = "desc";
        this.sort_field = "user_count";
      }
    },
    // 选择分类中的一级分类
    one: function(index, item) {
      this.threeclassify=[1];
      if (index == -1) {
        this.tab_classify_name = "全部分类";
        this.index = index;
        this.one_id = item;
        this.group_id = "";
        this.group_name = "全部分类";
        this.name_one = "全部分类";
        this.id_one = "";
        this.threeclassify = [1];
      } else {
        this.index = index;
        this.one_id = item.id;
        this.tab_classify_name = item.name;
        this.group_id = item.id;
        this.group_name = item.name;
        this.name_one = item.name;
        this.id_one = item.id;
        this.two_id = "b";
        this.three_id = "c";
      }
    },
    two: function(index, item) {
      if (index == -1) {
        this.tab_name = "";
        this.tab_classify_name = this.name_one;
        this.group_name = this.name_one;
        this.group_id = this.id_one;
        this.two_id = "b";
        this.threeclassify = [1];
        this.datateam = [];
        this.list_empty = false;
        this.page = 1;
        this.getdatateam();
      } else {
        this.clear_options();
        this.threeclassify = item.son_group;
        this.group_name = item.name;
        this.two_id = item.id;
        this.tab_classify_name = item.name;
        this.group_id = item.id;
        this.name_two = item.name;
        this.id_two = item.id;
      }
    },
    three: function(index, item) {
      if (index == -1) {
        this.tab_name = "";
        this.tab_classify_name = this.name_two;
        this.group_name = this.name_two;
        this.group_id = this.id_two;
        if (this.two_id == "b") {
          this.tab_classify_name = this.name_one;
          this.group_name = this.name_one;
          this.group_id = this.id_one;
        }
        this.datateam = [];
        this.list_empty = false;
        this.page = 1;
        this.getdatateam();
      } else {
        this.clear_options();
        this.group_name = item.name;
        this.three_id = item.id;
        this.tab_classify_name = item.name;
        this.group_id = item.id;
        this.datateam = [];
        this.list_empty = false;
        this.page = 1;
        this.getdatateam();
        this.tab_name = "";
      }
    },
    // 点击遮罩cover
    cover() {
      this.style = {
        height: "auto"
      };
      this.list_empty = false;
      this.page = 1;
      this.datateam = [];
      this.getdatateam();
      this.tab_name = "";
    },
    // 获取分类数据开始
    getdata: function() {
      let params = {
        functioncode: "group_list",
        group_type: 55,
        team_id: this.from_team_id != "" ? this.from_team_id : this.team_id
      };
      this.api.get(params).then(data => {
        if (data.returncode == "000000" && data.record) {
          this.classifydata = data.record;
          var param = this.$route.params.par;
          if (param) {
            this.index = param.one_index;
          }
        } else {
          console.log("请求失败");
        }
      });
    },

    // 获取数据开始
    getdatateam: function() {
      this.style = {
        height: "auto",
        overflow: "scroll"
      };
      this.is_loading = true;
      let params = {
        functioncode: "supplier_product_list_new",
        limit: 10,
        page: this.page,
        product_type: JSON.stringify([0, 31, 52, 53, 56]),
        state: JSON.stringify([1]),
        team_id: this.from_team_id != "" ? this.from_team_id : this.team_id
      };
      if (this.group_id != "") {
        params.group_id = this.group_id;
      }
      if (this.keyword != "") {
        params.key_field = "name";
        params.key_word = this.keyword;
        params.keyword = this.keyword;
      }
      if (this.product_type != "") {
        params.product_type = this.product_type;
      }
      if (this.sort_field != "" && this.sort_way != "") {
        params.sort_field = this.sort_field;
        params.sort_way = this.sort_way;
      }
      if (this.tab_price.length > 0) {
        params.price_range = JSON.stringify(this.tab_price);
      }
      this.api.get(params).then(data => {
        this.is_loading = false;
        if (data.returncode == "000000" && data.record) {
          this.group_total = data.total;
          this.allLoad = true;
          if (data.record.length > 0) {
            if (this.datateam == "" && this.page == 1) {
              this.datateam = data.record;
            } else {
              this.datateam = this.datateam.concat(data.record);
              // console.log(this.datateam)
            }
            var d = data.record;
            this.no_data = false;
          } else {
            if (this.page == 1) {
              this.list_empty = true;
            } else {
              this.no_data = true;
            }
          }
        } else {
          console.log("请求失败");
        }
      });
    },
    detailPage: function(item) {
      //详情页
      switch (item.product_type) {
        case 0:
          this.$router.push({ name: "mooc_detail", params: { id: item.id } });
          break;
        case 31:
          this.$router.push({
            name: "live_video_detail",
            params: { id: item.id }
          });
          break;
        case 56:
          this.$router.push({
            name: "live_audio_detail",
            params: { id: item.id }
          });
          break;
        case 53:
          this.$router.push({ name: "micro_detail", params: { id: item.id } });
          break;
        case 52:
          this.$router.push({
            name: "special_detail",
            params: { id: item.id }
          });
          break;
        default:
          break;
      }
    },
    loadMore: function() {
      //分页加载
      var _this = this;
      if (_this.allLoad && !_this.is_loading && !_this.no_data) {
        _this.page += 1;
        var g_id = _this.g_id;
        _this.getdatateam(g_id);
      }
    }
  } //分页加载结束
};
</script>
<style scoped lang="less">
.find_search {
  height: 100%;
  ::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.1);
  }
  .top_relative {
    position: relative;
    width: 100%;
    top: 0;
    z-index: 999;
    .search {
      height: 0.25rem;
      padding: 0.08rem 0.09rem;
      background: #ffffff;
      display: flex;
      .logo {
        width: 0.45rem;
        text-align: center;
        img {
        display: inline-block;
        max-width: 0.25rem;
        height: auto;
        border-radius: 50%;
        }
      }
      .center {
        flex: 1;
        background: #f3f2f8;
        height: 0.25rem;
        border-radius: 0.25rem;
        span {
          display: inline-block;
          width: 0.28rem;
          height: 0.25rem;
          float: left;
          background: url(../../assets/images/find/magnifier.png)no-repeat;
          background-size: 0.14rem 0.14rem;
          background-position: center center;
        }
        input[type="text"] {
          padding: 0;
          display: block;
          height: 0.25rem;
          width: 85%;
          float: left;
          background: #f3f2f8;
        }
      }
    }
    /*tab开始*/
    .tab {
      display: flex; // box-shadow: 0 1px 0 0 rgba(0, 0, 0, 0.1);
      background: #ffffff;
      div {
        flex: 1;
        text-align: center;
        font-size: 0.125rem;
        color: #333333;
        height: 0.28rem;
        line-height: 0.28rem;
        border-bottom: 0.01rem solid #cfcfcf;
        overflow: hidden;
        &.cart {
          height: 0.29rem;
          color: #00d8c9;
          background: url(../../assets/images/find/tab_bg.png)no-repeat;
          border-bottom: none;
          background-size: 100% 0.06rem;
          background-position: 0 bottom;
        }
        i {
          display: inline-block;
          color: #999999;
          margin-left: 0.2rem;
          transition: 0.5s;
          -webkit-transition: 0.5s;
          &.rotate {
            display: inline-block;
            transform: rotateZ(-180deg);
            -webkit-transform: rotateZ(-180deg);
          }
        }
      }
    }
    .panel {
      width: 100%;
      background: #ffffff;
      position: fixed; // 综合面板
      z-index: 999;
      .panel_com {
        li {
          font-size: 0.12rem;
          color: #333333;
          height: 0.42rem;
          line-height: 0.42rem;
          text-indent: 0.11rem;
          border-bottom: 0.01rem solid #d0d0d0;
          border-left: 0.03rem solid #ffffff;
          overflow: hidden;
          &.active {
            border-left: 0.03rem solid #00d8c9;
            color: #00d8c9;
          }
        }
      } // 分类面板
      .panel_classify {
        display: flex;
        .one {
          flex: 1;
          height: 3rem;
          overflow: scroll;
          ul {
            background: #f2f2f2;
            li {
              height: 0.45rem;
              font-size: 0.12rem;
              color: #333333;
              line-height: 0.45rem;
              text-align: center;
              overflow: hidden;
              background: #f2f2f2;
              &.active {
                color: #00d8c9;
                background: #e8e8e9;
              }
            }
          }
        }
        .two {
          flex: 1;
          height: 3rem;
          overflow: scroll;
          .none {
            height: 100%; 
            background-size: 80% auto;
            background-position: center;
            img {
              display: block;
              margin: 0.5rem auto;
              margin-bottom: 0.1rem;
            }
            .tit {
              text-align: center;
              font-size: 0.11rem;
              color: #cccccc;
            }
          }
          ul {
            height: 100%;
            background: #f8f8f9;
            li {
              height: 0.45rem;
              font-size: 0.12rem;
              color: #333333;
              line-height: 0.45rem;
              text-align: center;
              overflow: hidden;
              background: #f8f8f9;
              &.active {
                color: #00d8c9;
                background: #ffffff;
              }
              &.none {
                height: 100%; 
                background-size: 80% auto;
                background-position: center;
                img {
                  display: block;
                  margin: 0.5rem auto;
                  margin-bottom: 0.1rem;
                }
                .tit {
                  text-align: center;
                  font-size: 0.11rem;
                  color: #cccccc;
                }
              }
            }
          }
        }
        .three {
          flex: 1;
          height: 3rem;
          overflow: scroll;
          .none {
            height: 100%; 
            background-size: 80% auto;
            background-position: center;
            img {
              display: block;
              margin: 0.5rem auto;
              margin-bottom: 0.1rem;
            }
            .tit {
              text-align: center;
              font-size: 0.11rem;
              color: #cccccc;
            }
          }
          ul {
            height: 100%;
            background: #ffffff;
            li {
              height: 0.45rem;
              font-size: 0.12rem;
              color: #333333;
              line-height: 0.45rem;
              text-align: center;
              overflow: hidden;
              background: #ffffff;
              &.active {
                color: #00d8c9;
              }
              &.none {
                height: 100%; 
                background-size: 80% auto;
                background-position: center;
                img {
                  display: block;
                  margin: 0.5rem auto;
                  margin-bottom: 0.1rem;
                }
                .tit {
                  text-align: center;
                  font-size: 0.11rem;
                  color: #cccccc;
                }
              }
            }
          }
        }
      } 
    }
    .group_show {
      height: 0.27rem;
      line-height: 0.27rem;
      text-align: center;
      background: #f2f2f2;
      color: #9f9f9f;
      font-size: 0.12rem;
      font {
        color: #00d8c9;
      }
    }
  } // 没有内容的默认样式
  .list_empty {
    height: 80%;
    background-size: 80% auto;
    background-position: center;
    img {
      display: block;
      margin: 0.5rem auto;
      margin-bottom: 0.1rem;
    }
    .tit {
      text-align: center;
      font-size: 0.11rem;
      color: #cccccc;
    }
  }
  /*列表开始*/
  .content {
    padding: 0 3% 0.4rem 3%;
    width: 94%;
    background:#ffffff;
    .list {
      height: 0.8rem;
      padding: 0.2rem 0.15rem;
      border-bottom: 0.01rem solid #ededed;
      display: flex;
      .img {
        display: inline-block;
        width: 1.1rem;
        height: 0.8rem;
        border-radius: 0.04rem;
        box-shadow: 0 0 1px 1px rgba(0, 0, 0, 0.2);
      }
      .text {
        height: 0.8rem;
        padding-left: 0.13rem;
        flex: 1;
        width: 0;
        .name {
          // width: 1.8rem;
          height: 0.255rem;
          line-height: 0.255rem;
          font-size: 0.15rem;
          color: #333333;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
        .type_time {
          height: 0.23rem;
          line-height: 0.23rem;
          .type {
            display: inline-block;
            height: 0.12rem;
            line-height: 0.12rem;
            padding-right: 0.05rem;
            font-size: 0.12rem;
            color: #999999;
          }
        }
        .count_price {
          width: 100%;
          height: 0.21rem;
          margin-top: 0.105rem;
          line-height: 0.21rem;
          display: flex;
          .count {
            font-size: 0.12rem;
            color: #333333;
            flex: 1;
            i{
              color:#4bc59e;
              font-weight: 600;
            }
          }
        }
      }
    }
    .clear:after {
      content: "";
      display: block;
      clear: both;
    }
  }
  .cover {
    background: rgba(0, 0, 0, 0.5);
    position: fixed;
    z-index: 998;
    width: 100%;
    height: inherit;
    top: 0;
    left: 0;
  }
}
</style>